import React, { Component } from 'react'
import { connect } from 'dva';

import moment from 'moment';
import { Form, Input, DatePicker, Icon } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DICT } from '../enum';
import { DropDownSelectObj } from '@/components/DropDownSelect/index';
import { dealElement } from '../../../../utils/util';

const { RangePicker } = DatePicker;

interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  initCurrent: Function,
  dict?: Object,
  dictList?: Object,
  new: boolean,
  cond?: any,
  handleShow?: Function
}

const FormItem = Form.Item;

@connect(({ device_alarm }) => ({
  dict: device_alarm.dict,
  cond: device_alarm.todoCond || {},
}))
class Search extends Component<Props, any> {

  state = {
    options: [],
    type: null,
  }

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'device_alarm/queryDict',
      payload: {
        keyList: DICT
      }
    }).then(() => {
      const { cond, form } = this.props;
      const { pageNum, pageSize, ...searchParams } = cond;

      form.setFieldsValue(searchParams);
    });
  }

  search = e => {
    e.preventDefault()
    const { form } = this.props;

    form.validateFields((err, values) => {
      if (!err) {
        const { dispatch } = this.props;
        dispatch({
          type: 'device_alarm/updateTodoCond',
          payload: {
            ...values,
            handle: 1,
            fire: this.state.type,
            beginTime: Array.isArray(values.pushTime) && values.pushTime[0] ? moment(values.pushTime[0]).format("YYYY-MM-DD") : null,
            endTime: Array.isArray(values.pushTime) && values.pushTime[1] ? moment(values.pushTime[1]).format("YYYY-MM-DD") : null,
          }
        }).then(() => {
          this.props.initCurrent()
        })
      }
    });
  };

  handleChangeTime = (value) => {
    const { cond = {}, dispatch } = this.props;
    cond['beginTime'] = Array.isArray(value) && value[0] ? moment(value[0]).format("YYYY-MM-DD") : null;
    cond['endTime'] = Array.isArray(value) && value[1] ? moment(value[1]).format("YYYY-MM-DD") : null;
    cond['handle'] = 1;

    dispatch({
      type: 'device_alarm/updateTodoCond',
      payload: dealElement(cond)
    }).then(() => {
      this.props.initCurrent()
    })
  }


  handleChange = (type, value) => {
    const { cond = {}, dispatch } = this.props;
    cond[type] = value;
    cond['handle'] = 1;

    dispatch({
      type: 'device_alarm/updateTodoCond',
      payload: cond
    }).then(() => {
      this.props.initCurrent()
    })
  }

  render() {
    const { form, dict = {} } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 9 },
      wrapperCol: { span: 15 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow style={{ padding: '0 20px' }}>
          <SearchCol key={6} span={3}>
            <FormItem
              label="设备名称"
              {...formItemLayout}
            >
              {getFieldDecorator('deviceName', {
                rules: [{ message: '输入设备名称' }],
              })(
                <Input style={{ width: '100%' }} placeholder="设备名称" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={0} span={3}>
            <FormItem
              label="安装地址"
              {...formItemLayout}
            >
              {getFieldDecorator('installLocationName', {
                rules: [{ message: '输入安装地址' }],
              })(
                <Input style={{ width: '100%' }} placeholder="安装位置" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1} span={3}>
            <FormItem
              label="设备类型"
              {...formItemLayout}
            >
              {getFieldDecorator('kind')(
                DropDownSelectObj({ dict, type: 'device.kind', onChange: (v) => this.handleChange('kind', v) })
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={2} span={3}>
            <FormItem
              label="报警类型"
              {...formItemLayout}
            >
              {getFieldDecorator('disPoseStatus')(
                DropDownSelectObj({ dict, type: 'device.state.status', onChange: (v) => this.handleChange('disPoseStatus', v) })
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={7} span={3}>
            <FormItem
              label="通讯地址"
              {...formItemLayout}
            >
              {getFieldDecorator('networkAddr', {
                rules: [{ message: '输入通讯地址' }],
              })(
                <Input style={{ width: '100%' }} placeholder="通讯地址" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={5} span={5}>
            <FormItem
              label="报警时间"
              {...formItemLayout}
            >
              {getFieldDecorator('pushTime')(
                <RangePicker
                  showTime={false}
                  format="YYYY-MM-DD"
                  placeholder={['开始日期', '结束日期']}
                  onChange={(v) => this.handleChangeTime(v)}
                />
              )}
            </FormItem>
          </SearchCol>
        </SearchRow>
        <SearchRow>
          <SearchCol key={3} span={23}>
            <SearchRow type="flex" justify="end">
              <SearchButton onClick={() => { this.props.handleShow() }}  icon="export" >导出</SearchButton>
              <SearchButton onClick={() => {
                this.setState({ options: [] })
                this.props.form.resetFields();
              }} ><Icon type="redo" /> 重置</SearchButton>
              <SearchButton htmlType="submit" type="primary"><Icon type="search" />搜索</SearchButton>
            </SearchRow>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
